<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>环保生活指南 - HTML5语义化标签示例</title>
    <style>
        header, nav, main, article, section, aside, footer {
            border: 1px solid #ccc;
            margin: 10px;
            padding: 15px;
        }
        nav ul {
            list-style: none;
            padding: 0;
        }
        nav li {
            display: inline;
            margin-right: 20px;
        }
    </style>
</head>
<body>

    <!-- 网站头部 -->
    <header>
        <h1>绿色星球</h1>
        <p>倡导可持续生活的环保平台</p>
    </header>

    <!-- 导航菜单 -->
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#articles">环保文章</a></li>
            <li><a href="#about">关于我们</a></li>
        </ul>
    </nav>

    <!-- 主要内容 -->
    <main>

        <!-- 一篇文章：环保生活小贴士 -->
        <article>
            <header>
                <h2>如何在日常生活中践行环保？</h2>
                <p>发布日期: <time datetime="2025-09-27">2025年9月27日</time></p>
            </header>

            <!-- 第一节：减少塑料使用 -->
            <section>
                <h3>减少一次性塑料制品</h3>
                <p>每天全球消耗数亿个塑料袋和塑料瓶。我们可以从自带购物袋、使用可重复使用的水杯做起，减少对环境的负担。</p>
                <figure>
                    <img src="reusable-bottle.jpg" alt="可重复使用的水杯代替塑料瓶">
                    <figcaption>图1: 使用环保水杯，减少塑料垃圾</figcaption>
                </figure>
            </section>

            <!-- 第二节：节约能源 -->
            <section>
                <h3>节约用电与绿色出行</h3>
                <p>关闭不用的电器、选择公共交通或骑行，不仅能降低碳排放，还能节省开支。每周少开一天车，就是对地球的一份关爱。</p>
            </section>

            <!-- 文章结尾信息 -->
            <footer>
                <p>文章标签: <mark>环保</mark>, <mark>可持续生活</mark>, <mark>节能减排</mark></p>
            </footer>
        </article>

    </main>

    <!-- 侧边栏：相关推荐 -->
    <aside>
        <h3>相关推荐</h3>
        <ul>
            <li><a href="#">家庭垃圾分类指南</a></li>
            <li><a href="#">低碳饮食的10种方式</a></li>
        </ul>
    </aside>

    <!-- 网站底部 -->
    <footer>
        <p>© 2025 绿色星球. 保护地球，人人有责。</p>
        <address>联系我们: <a href="mailto:info@greenplanet.org">info@greenplanet.org</a></address>
    </footer>

</body>
</html>